﻿<div class="content-wrap research-listings">
    <div class="subnav_0">
        <ul class="greyTabs level_0">
            <li class="active">
                <a href="#/portfolios">Portfolio Management</a>
            </li>
            <li class="disabled">
                <a href="">Portfolio Analytics</a>
            </li>
            <li class="disabled">
                <a href="">Portfolio Monitoring </a>
            </li>
        </ul>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="content">
        <div class="content-pad">
            <!--<div class="page-title">Portfolio</div>-->
            <div class="left-content">
                <div class="title-company-arrows editable" ng-show="!portfolioOverview.isRenamingPortfolioName" ng-click="portfolioOverview.changeIsRenaming()" style="word-break: break-all;">{{portfolioOverview.portfolio.name}}</div>
                <div ng-show="portfolioOverview.isRenamingPortfolioName">
                    <input type="text" class="editable-title-inp" ng-model="portfolioOverview.newNamePortfolio" />
                    <div class="editable-title-buttons">
                        <button class="editable-title-save" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio || portfolioOverview.newNamePortfolio.length > 100 " ng-click="portfolioOverview.renamePortfolio(portfolioOverview.newNamePortfolio)"></button>
                        <button class="editable-title-clear" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" ng-click="portfolioOverview.changeIsRenaming()"></button>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="table">
                    <div class="table-row odd">
                        <div class=" table-cell width_290" style="border-top: none;"># of Total Securities</div>
                        <div class="table-cell center-align" style="border-top: none;"><b>{{portfolioOverview.portfolio.companyCount}}</b></div>
                    </div>
                    <!--<div class="table-row">
                        <div class="table-cell width_290">Alerts</div>
                        <div class="table-cell center-align"><a href="" class="disabled">Enabled</a></div>
                    </div>-->
                </div>
                <div style="margin-top: 30px;">
                    <!--<input type="button" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" value="Add Security" class="btn-green" style="min-width: 130px; width: 130px;">-->
                    <input type="button" value="Export" ng-click="portfolioOverview.addTaskExportPortfolio()" class="btn-green" style="min-width: 130px; width: 130px;">
                </div>
            </div>
            <div class="right-content">

                <div class="clear">&nbsp;</div><br />
                <div style="float: right; width: 305px;">
                    <div class="float_16_left black">Portfolio last edited:</div>
                    <div class="float_16_right green">{{portfolioOverview.portfolio.dateModified | date: 'MMM d, y'}} </div>
                    <div class="clear">&nbsp;</div>
                    <div class="float_16_left black">Portfolio created by:</div>
                    <div class="float_16_right green">{{portfolioOverview.portfolio.addedByFullName}}</div>
                    <div class="clear">&nbsp;</div>
                    <div class="float_16_left black">Sharing</div>
                    <div class="float_16_right green">
                        <div style="display: inline-block;">
                            <div ng-init="true" ng-switch on="portfolioOverview.portfolio.sharingStatus == 1 ? true : false">
                                <button ng-switch-when='true' ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" ng-click='portfolioOverview.setShared(portfolioOverview.portfolio)' class="switch-btn">Off</button>
                                <button ng-switch-when='false' ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" ng-click='portfolioOverview.setPrivate(portfolioOverview.portfolio)' class="switch-btn_on">On</button>
                            </div>
                        </div>
                    </div>
                    <div class="clear">&nbsp;</div>
                </div>
            </div>
            <div class="clear">&nbsp;</div><br /><br />
            <div class="table">
                <div class ="table-row">
                    <div class="table-head width_290" style="width: 500px;">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('CompanyNameLowercase');" ng-class="portfolioOverview.orderByCol === 'CompanyNameLowercase' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Company Name</a>
                    </div>
                    <div class="table-head width_290">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('FirstISINLowercase');" ng-class="portfolioOverview.orderByCol === 'FirstISINLowercase' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Company ID</a>
                    </div>
                    <div class="table-head center-align width_130" style="width: 60px; vertical-align: top;">
                        <a href="">Delete</a>
                    </div>
                </div>
                <div class="{{$index % 2==1 ? 'table-row odd': 'table-row'}}" ng-repeat="item in portfolioOverview.portfolioCompanyList">
                    <div class="table-cell width_290" ng-class="{'last':$last}" style="border-left: 1px solid #e0e0e0;"><a style="word-break: break-all;" href="#/research/overview/{{item.companyNameUrlFriendly}}">{{item.companyName}}</a></div>
                    <div class="table-cell width_130" style="width: 210px; border-left: 1px solid #e0e0e0;" ng-class="{'last':$last}">
                        {{item.isiNs[0]}}
                        <!--<div ng-repeat="isin in item.isiNs">
            {{isin}}
        </div>-->
                    </div>
                    <div class="table-cell center-align width_130" style="width: 60px; border-left: 1px solid #e0e0e0;" ng-class="{'last':$last}">
                        <button class="delete-sel-large" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" ng-click="portfolioOverview.deletePortfolioCompany(item.id)"></button>
                    </div>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <sustainalytics-pager></sustainalytics-pager>
        </div>
    </div>
</div>